<template>
	<view class="tui-center">
		<uni-nav-bar fixed leftClick title="联系人管理" @click-left="clickLeft()"></uni-nav-bar>
		<view class="tui-dontacts">
			<view class="tui-dontacts-marg" v-if="formShow">
				<view class="tui-dontacts-center tui-flex" v-for="(item, index) in list" :key="index">
					<view class="tui-dontacts-flex">
						<view>{{item.userName}}</view>
						<view class="tui-dontacts-txt">身份证: {{item.cardNo}}</view>
						<view class="tui-dontacts-txt">手机号: {{item.phone}}</view>
					</view>
					<view class="tui-dontacts-icon">
						<view @tap="coEdit(item)"><uni-icons type="compose" size="36" color="#dd524d"></uni-icons></view>
						<view @tap="coDelete(item)" style="padding-left: 30rpx;">
							<uni-icons type="trash" size="36" color="#666"></uni-icons>
						</view>
					</view>
				</view>
				<view class="tui-dontacts-plus" @click="plusTo">
					<uni-icons type="plus" size="40" color="#006953"></uni-icons>
					<view class="tui-pd-left">
						<text>添加新身份</text>
					</view>
				</view>
			</view>
			<!--form 表单-->
			<view class="tui-dontacts-row" v-else>
				<view class="row br-b">
					<text class="tui-necessary">*</text>
					<text class="tit">真实姓名:</text>
					<input class="input" type="text" v-model="addressData.userName" placeholder="请填写真实姓名" placeholder-class="placeholder" />
				</view>
				<view class="row br-b">
					<text class="tui-necessary">*</text>
					<text class="tit">身份证号:</text>
					<input class="input" type="text" v-model="addressData.cardNo" placeholder="请填写身份证号" placeholder-class="placeholder" />
				</view>
				<view class="row br-b">
					<text class="tui-necessary">*</text>
					<text class="tit">手机号:</text>
					<input class="input" type="text" v-model="addressData.phone" placeholder="请填写手机号" placeholder-class="placeholder" />
				</view>
				<view class="tui-dontacts-btn">
					<button style="background: #6CB041" type="primary" @click="confirm">{{ editShow ? '确认修改':'立即添加' }}</button>
					<button class="add-btn" type="default" @click="colse">取消</button>
				</view>
			</view>
		</view>
		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
	
	export default {
		name: 'contacts',
		components: {
			uniIcons, uniLoginModel
		},
		data() {
			return {
				addressData: {
                    userName: '',
                    cardNo: '',
                    phone: ''
				},
				list: [],
				editShow: false,
				formShow: true,
                dateForm: {
                    pageNum: 1,
                    pageSize: 4
                },
                status: ''
			}
		},
        onLoad(option) {
			this.status = option.status
            this.getList()
        },
		methods: {
            getList() {
                this.$api.api('contact.list').then(res => {
                    this.list = res.data.list
                }).catch(error => {
                    this.list = []
                });
            },
			//	修改
			coEdit(item) {
				this.editShow = true
				this.formShow = false
				this.addressData = {
                    userName: item.userName,
                    cardNo: item.cardNo,
                    phone: item.phone,
                    id: item.id
				}
			},
			//	删除
			coDelete(item) {
                uni.showModal({
                    content: '确定要删除联系人吗？删除不可恢复',
                    success: (e)=>{
                        if(e.confirm){
                            uni.request({
                                url: `user/contact/delete/${item.id}`,
                                method: 'POST',
                                header: {'content-type': 'application/json', 'Authorization': 'Bearer ' + uni.getStorageSync('token')}
                            }).then(res => {
                                this.getList()
                            }).catch(error => {
                                this.$api.msg(error.message)
                            })
                        }
                    }
                });
			},
			//  添加
			confirm() {
				let data = this.addressData
				if(!data.userName){
					uni.showModal({ content: '请填写真实姓名', showCancel: false });
					return;
				}
                var reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if(!reg.test(data.cardNo)){
					uni.showModal({ content: '请填写身份证号', showCancel: false });
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phone)){
					uni.showModal({ content: '请输入正确的手机号码', showCancel: false });
					return;
				}
                this.$api.api(`contact.${!this.editShow ? 'add' : 'update'}`, this.addressData).then(res => {
                    if (res.code == 200) {
                        this.getList()
                        this.$api.msg(this.editShow == false ? '添加成功' : '修改成功')
                        this.formShow = true
					} else {
                        this.$api.msg(res.message)
					}
                }).catch(error => {
                    this.$api.msg(error.message)
                });
			},
			colse() {
				this.formShow = true
			},
			plusTo() {
                this.addressData = {
                    userName: '',
                    cardNo: '',
                    phone: ''
                }
				this.formShow = false
				this.editShow = false
			},
            clickLeft() {
                let than = this
				if (than.status) {
                    console.log(than.status)
                    uni.navigateBack({delta:1})
                    than.$api.prePage().popList = than.list
				} else {
                    console.log('data')
                    uni.navigateBack({delta:1,})
				}
                // uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.tui-dontacts {
		/*padding: 20rpx 0;*/
		.tui-dontacts-marg {
			margin: 0 30rpx;
			.tui-dontacts-plus {
				padding: 10rpx;
				margin-top: 40rpx;
				border: 2rpx solid #006953;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				color: #006953;
			}
			.tui-dontacts-center {
				background-color: #fff;
				margin-top: 30rpx;
				border-radius: 10rpx;
				padding: 10rpx 25rpx;
				.tui-dontacts-flex {
					width: 74%;
					border-right: 2rpx solid #eee;
					.tui-dontacts-txt {
						color: #999;
					}
				}
				.tui-dontacts-icon {
					width: 17%;
					padding-left: 34rpx;
					padding-right: 20rpx;
					display: flex;
					justify-content: space-between;
				}
			}
		}
		
		.tui-dontacts-row {
			margin-top: 30rpx;
			.row {
				height: 130rpx;
				background-color: $uni-bg-color;
				position: relative;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				.tui-necessary {
					color: $uni-color-error;
					font-size: $uni-font-size-lg;
					margin-right: 8rpx;
				}
				.tit {
					width: 180rpx;
					flex-shrink: 0;
					font-size: $uni-font-size-md;
				}
				.input {
					line-height: 3.4em;
					height: 3.4em;
					min-height: 3.4em;
					flex: 1;
					font-size: 28rpx;
				}
				.placeholder {
					font-size: $uni-font-size-md;
				}
			}
			.tui-dontacts-btn {
				margin: 100rpx 30rpx 30rpx;
				uni-button {
					font-size: 36rpx;
				}
				.add-btn {
					margin-top: 30rpx;
					background-color: #ddd;
				}
			}
			
		}
		
	}
</style>
